<template>
	<div class="wrap">
		<h2 class="title">假期申请记录</h2>
		<el-table
			:data="holidayApplyLog"
			:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
			:row-style="tableRowClassName"
			:highlight-current-row="true">
			<el-table-column prop="stuId" label="学号" width="100" />
			<el-table-column prop="stuName" label="姓名" />
			<el-table-column prop="dorNumber" label="房间号" />
			<el-table-column prop="holReason" label="申请原因" />
			<el-table-column label="假期情况">
				<template #default="{ row }">
					<p class="reason">{{ row?.holStatus }}</p>
				</template>
			</el-table-column>
			<el-table-column prop="holTime" label="申请时间">
				<template #default="{ row }">
					{{ new Date(row.holTime).toLocaleDateString() }}
				</template>
			</el-table-column>
			<el-table-column prop="holApply" label="审核申请进度">
				<template #default="{ row }">
					<span :style="{ color: '#eebe77' }">{{ row.holApply }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button link type="danger" v-if="row.holStatus == '离校'" @click="handleBackSchool(row)">返校</el-button>
					<el-button link type="info" v-else @click="handleBackSchool(row)">返校</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 返校对话框 -->
		<el-dialog v-model="showBackDialog" width="400">
			<template #header>
				<h2 class="back">返校登记</h2>
			</template>
			<el-form label-position="top">
				<el-form-item label="返校理由：" label-width="30">
					<el-input type="textarea" resize="none" :autosize="{ minRows: 3, maxRows: 4 }" v-model="backReasons" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" plain @click="handleBackSchoolApply">确认</el-button>
				<el-button type="danger" plain @click="showBackDialog = false">取消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getApplyInfo, stuBackSchool } from '@/utils/axios/stuReqest'
import { debounce } from '@/utils/tools'

const holidayApplyLog = ref()

// 撤回的目标申请
const delApply = ref()

// 显示返校对话框
const showBackDialog = ref()

// 返校理由
const backReasons = ref()

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

// 处理撤回事件
const handleBackSchool = (val) => {
	if (val.holStatus != '离校') return
	delApply.value = val
	showBackDialog.value = true
}
// 返校状态切换
const handleBackSchoolApply = debounce(async () => {
	await stuBackSchool({ holReason: backReasons.value })
	let { data } = await getApplyInfo()
	holidayApplyLog.value = data

	showBackDialog.value = false
})

onMounted(async () => {
	let { data } = await getApplyInfo()
	console.log("--:",data);
	holidayApplyLog.value = data
})
</script>

<style scoped lang="scss">
.back {
	color: aqua;
	font-size: 20px;
}
</style>
